<template>
  <div class="retail-container">
    <div class="page-header">
      <h2>羽毛球用品商城</h2>
      <p>精选优质羽毛球装备，满足您的运动需求</p>
    </div>

    <div class="shopping-content">
      <!-- 分类筛选侧边栏 -->
      <aside class="category-sidebar">
        <h3>商品分类</h3>
        <ul class="category-list">
          <li :class="{ active: selectedCategory === 'all' }" @click="selectCategory('all')">全部商品</li>
          <li :class="{ active: selectedCategory === 'racket' }" @click="selectCategory('racket')">羽毛球拍</li>
          <li :class="{ active: selectedCategory === 'shoes' }" @click="selectCategory('shoes')">羽毛球鞋</li>
          <li :class="{ active: selectedCategory === 'clothes' }" @click="selectCategory('clothes')">运动服装</li>
          <li :class="{ active: selectedCategory === 'accessories' }" @click="selectCategory('accessories')">运动配件</li>
          <li :class="{ active: selectedCategory === 'balls' }" @click="selectCategory('balls')">羽毛球</li>
        </ul>

        <div class="price-filter">
          <h3>价格筛选</h3>
          <div class="price-range">
            <input type="number" v-model="minPrice" placeholder="最低价">
            <span>-</span>
            <input type="number" v-model="maxPrice" placeholder="最高价">
            <button class="filter-btn" @click="filterProducts">筛选</button>
          </div>
        </div>
      </aside>

      <!-- 商品列表区域 -->
      <main class="products-grid">
        <div class="sort-bar">
          <div class="sort-options">
            <span>排序方式:</span>
            <select v-model="sortOption" @change="sortProducts">
              <option value="recommended">推荐排序</option>
              <option value="priceAsc">价格从低到高</option>
              <option value="priceDesc">价格从高到低</option>
              <option value="newest">最新上架</option>
            </select>
          </div>
          <div class="view-options">
            <button class="grid-view active"><i class="grid-icon">▦</i></button>
            <button class="list-view"><i class="list-icon">☰</i></button>
          </div>
        </div>

        <div class="products-container">
          <div class="product-card" v-for="product in filteredProducts" :key="product.id">
            <div class="product-image">
              <img :src="product.imageUrl" :alt="product.name">
              <div class="discount-badge" v-if="product.discount > 0">{{ product.discount }}折</div>
            </div>
            <div class="product-info">
              <div class="product-category">{{ getCategoryName(product.category) }}</div>
              <h3 class="product-name">{{ product.name }}</h3>
              <div class="product-price">
                <span class="current-price">{{ product.price.toFixed(2) }}元</span>
                <span class="original-price" v-if="product.discount > 0">{{ (product.price / (product.discount / 10)).toFixed(2) }}元</span>
              </div>
              <div class="product-rating">
                <div class="stars" :style="{ width: (product.rating / 5) * 100 + '%' }"></div>
                <span class="rating-count">({{ product.reviewCount }})</span>
              </div>
              <button class="add-to-cart-btn" @click="addToCart(product)">加入购物车</button>
            </div>
          </div>
        </div>

        <div class="no-products" v-if="filteredProducts.length === 0">
          暂无符合条件的商品
        </div>
      </main>
    </div>

    <!-- 购物车侧边栏 -->
    <div class="cart-sidebar" :class="{ active: cartOpen }">
      <div class="cart-header">
        <h3>购物车 ({{ cartItems.length }})</h3>
        <button class="close-cart" @click="toggleCart">×</button>
      </div>
      <div class="cart-items">
        <div class="cart-item" v-for="(item, index) in cartItems" :key="index">
          <img :src="item.imageUrl" :alt="item.name" class="item-image">
          <div class="item-details">
            <h4 class="item-name">{{ item.name }}</h4>
            <div class="item-price">{{ item.price.toFixed(2) }}元</div>
            <div class="item-quantity">
              <button @click="updateQuantity(index, -1)">-</button>
              <span>{{ item.quantity }}</span>
              <button @click="updateQuantity(index, 1)">+</button>
            </div>
          </div>
          <button class="remove-item" @click="removeFromCart(index)">×</button>
        </div>
      </div>
      <div class="cart-summary" v-if="cartItems.length > 0">
        <div class="summary-row">
          <span>小计:</span>
          <span class="total-price">{{ calculateTotal().toFixed(2) }}元</span>
        </div>
        <button class="checkout-btn">去结算</button>
      </div>
      <div class="empty-cart" v-else>
        购物车为空
      </div>
    </div>
    <div class="overlay" :class="{ active: cartOpen }" @click="toggleCart"></div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';


// 状态管理
const selectedCategory = ref('all');
const minPrice = ref('');
const maxPrice = ref('');
const sortOption = ref('recommended');
const cartOpen = ref(false);
const cartItems = ref([]);

// 模拟商品数据
const products = ref([
  {
    id: 1,
    name: '尤尼克斯 YONEX ASTROX 99 PRO 羽毛球拍',
    category: 'racket',
    price: 1299.00,
    discount: 9,
    rating: 4.8,
    reviewCount: 126,
    imageUrl: 'https://images.unsplash.com/photo-1551361415-012e42a34764?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 2,
    name: '李宁 突袭7C 羽毛球拍',
    category: 'racket',
    price: 899.00,
    discount: 0,
    rating: 4.5,
    reviewCount: 89,
    imageUrl: 'https://images.unsplash.com/photo-1581368074604-551406c67a0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 3,
    name: '胜利 VICTOR A970ACE 羽毛球鞋',
    category: 'shoes',
    price: 799.00,
    discount: 8.5,
    rating: 4.7,
    reviewCount: 215,
    imageUrl: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 4,
    name: '尤尼克斯 YONEX SHB65Z3 羽毛球鞋',
    category: 'shoes',
    price: 1099.00,
    discount: 0,
    rating: 4.9,
    reviewCount: 156,
    imageUrl: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 5,
    name: '李宁 羽毛球运动T恤 男款',
    category: 'clothes',
    price: 199.00,
    discount: 7,
    rating: 4.3,
    reviewCount: 320,
    imageUrl: 'https://images.unsplash.com/photo-1589254047706-b3c655de4583?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 6,
    name: '尤尼克斯 YONEX 羽毛球运动短裤',
    category: 'clothes',
    price: 249.00,
    discount: 0,
    rating: 4.4,
    reviewCount: 187,
    imageUrl: 'https://images.unsplash.com/photo-1589254047706-b3c655de4583?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 7,
    name: '尤尼克斯 AC102 手胶 (3条装)',
    category: 'accessories',
    price: 45.00,
    discount: 0,
    rating: 4.6,
    reviewCount: 523,
    imageUrl: 'https://images.unsplash.com/photo-1569473715693-962ae8174a4a?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 8,
    name: '胜利 VICTOR 羽毛球拍包 6支装',
    category: 'accessories',
    price: 399.00,
    discount: 9,
    rating: 4.5,
    reviewCount: 98,
    imageUrl: 'https://images.unsplash.com/photo-1597224645995-8e6d2018525b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 9,
    name: '尤尼克斯 YONEX AS-50 羽毛球 (12只装)',
    category: 'balls',
    price: 128.00,
    discount: 0,
    rating: 4.7,
    reviewCount: 412,
    imageUrl: 'https://images.unsplash.com/photo-1569473715693-962ae8174a4a?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 10,
    name: '李宁 A+600 羽毛球 (12只装)',
    category: 'balls',
    price: 89.00,
    discount: 8,
    rating: 4.4,
    reviewCount: 356,
    imageUrl: 'https://images.unsplash.com/photo-1569473715693-962ae8174a4a?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  }
]);

// 筛选商品
const filteredProducts = computed(() => {
  return products.value.filter(product => {
    // 分类筛选
    if (selectedCategory.value !== 'all' && product.category !== selectedCategory.value) {
      return false;
    }

    // 价格筛选
    const min = minPrice.value ? Number(minPrice.value) : 0;
    const max = maxPrice.value ? Number(maxPrice.value) : Infinity;
    if (product.price < min || product.price > max) {
      return false;
    }

    return true;
  }).sort((a, b) => {
    // 排序
    switch (sortOption.value) {
      case 'priceAsc':
        return a.price - b.price;
      case 'priceDesc':
        return b.price - a.price;
      case 'newest':
        return b.id - a.id;
      default: // recommended
        return b.rating - a.rating;
    }
  });
});

// 选择分类
const selectCategory = (category) => {
  selectedCategory.value = category;
};

// 筛选商品
const filterProducts = () => {
  // 筛选逻辑已在computed属性中实现
};

// 排序商品
const sortProducts = () => {
  // 排序逻辑已在computed属性中实现
};

// 获取分类名称
const getCategoryName = (categoryValue) => {
  const categories = {
    'racket': '羽毛球拍',
    'shoes': '羽毛球鞋',
    'clothes': '运动服装',
    'accessories': '运动配件',
    'balls': '羽毛球'
  };
  return categories[categoryValue] || '其他';
};

// 切换购物车显示
const toggleCart = () => {
  cartOpen.value = !cartOpen.value;
};

// 添加到购物车
const addToCart = (product) => {
  const existingItemIndex = cartItems.value.findIndex(item => item.id === product.id);
  if (existingItemIndex >= 0) {
    cartItems.value[existingItemIndex].quantity++;
  } else {
    cartItems.value.push({
      ...product,
      quantity: 1
    });
  }
  // 保存购物车到localStorage
  localStorage.setItem('cartItems', JSON.stringify(cartItems.value));
  // 显示购物车
  toggleCart();
};

// 更新商品数量
const updateQuantity = (index, change) => {
  const newQuantity = cartItems.value[index].quantity + change;
  if (newQuantity > 0) {
    cartItems.value[index].quantity = newQuantity;
    localStorage.setItem('cartItems', JSON.stringify(cartItems.value));
  }
};

// 从购物车移除商品
const removeFromCart = (index) => {
  cartItems.value.splice(index, 1);
  localStorage.setItem('cartItems', JSON.stringify(cartItems.value));
};

// 计算购物车总价
const calculateTotal = () => {
  return cartItems.value.reduce((total, item) => {
    return total + (item.price * item.quantity);
  }, 0);
};

// 页面加载时从localStorage恢复购物车
const loadCartFromStorage = () => {
  const savedCart = localStorage.getItem('cartItems');
  if (savedCart) {
    cartItems.value = JSON.parse(savedCart);
  }
};

// 初始化加载购物车
loadCartFromStorage();
</script>

<style scoped>
.retail-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.page-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.page-header h2 {
  color: #2196F3;
  margin-bottom: 0.5rem;
}

.page-header p {
  color: #666;
  margin: 0;
}

.shopping-content {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

/* 分类侧边栏 */
.category-sidebar {
  background-color: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.category-sidebar h3 {
  color: #333;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

.category-list li {
  padding: 0.8rem 0.5rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.category-list li:hover {
  background-color: #f5f9ff;
}

.category-list li.active {
  background-color: #e3f2fd;
  color: #2196F3;
  font-weight: 500;
}

.price-filter {
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

.price-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.price-range input {
  width: 70px;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.price-range span {
  color: #666;
}

.filter-btn {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

/* 商品列表区域 */
.products-grid {
  background-color: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.sort-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.sort-options span {
  color: #666;
}

.sort-options select {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.view-options button {
  background: none;
  border: 1px solid #ddd;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}

.view-options button.active {
  background-color: #e3f2fd;
  border-color: #2196F3;
  color: #2196F3;
}

.products-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.product-card {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.product-image {
  position: relative;
  height: 200px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #f44336;
  color: white;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
}

.product-info {
  padding: 1rem;
}

.product-category {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background-color: #e3f2fd;
  color: #2196F3;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.product-name {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  color: #333;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}

.current-price {
  color: #f44336;
  font-weight: 500;
  font-size: 1.1rem;
}

.original-price {
  color: #999;
  text-decoration: line-through;
  font-size: 0.9rem;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.stars {
  height: 16px;
  background-color: #eee;
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  max-width: 100px;
}

.stars::before {
  content: '';
  height: 100%;
  background: linear-gradient(90deg, #FFC107 0%, #FF9800 100%);
}

.rating-count {
  color: #777;
  font-size: 0.9rem;
}

.add-to-cart-btn {
  width: 100%;
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-to-cart-btn:hover {
  background-color: #1976D2;
}

.no-products {
  text-align: center;
  padding: 3rem;
  color: #777;
  background-color: #f9f9f9;
  border-radius: 12px;
  grid-column: 1 / -1;
}

/* 购物车侧边栏 */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  height: 100vh;
  background-color: white;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  transform: translateX(100%);
  transition: transform 0.3s;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.cart-sidebar.active {
  transform: translateX(0);
}

.cart-header {
  padding: 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-header h3 {
  margin: 0;
  color: #333;
}

.close-cart {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #777;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.cart-item {
  display: flex;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.item-details {
  flex: 1;
}

.item-name {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  color: #333;
}

.item-price {
  color: #f44336;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.item-quantity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.item-quantity button {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  background: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.remove-item {
  background: none;
  border: none;
  color: #777;
  cursor: pointer;
  font-size: 1.2rem;
  align-self: flex-start;
}

.cart-summary {
  padding: 1.5rem;
  border-top: 1px solid #f0f0f0;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.total-price {
  font-weight: 500;
  color: #f44336;
}

.checkout-btn {
  width: 100%;
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 0.8rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

.empty-cart {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #777;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 999;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 992px) {
  .shopping-content {
    grid-template-columns: 1fr;
  }
  .category-sidebar {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 768px) {
  .products-container {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .cart-sidebar {
    width: 100%;
  }
}
</style>